<template>
  <div class="page">
    <div class="a-row">
      <search-field
        :value="listQuery.name"
        placeholder="输入校名快速检索"
        @searchchange="onSearchChange"
        @cancel="onSearchCancel"
      ></search-field>
    </div>
    <div class="u-line1 a-m-b-30" style="background-color: #efefef;"></div>
    <div class="a-row">
      <div v-if="state === 'error'">
        <div class="tip" style="margin-bottom: 20rpx;">暂无与“{{listQuery.name}}”相关的院校，请修改搜索关键词</div>
        <div class="no-result-tip"><text>搜索结果：</text><text style="margin-left:3rpx;">无</text></div>
      </div>
      <div v-for="school in schools"
           :key="item.code"
           class="a-m-b-30">
        <mt-item
          class="search-item"
          item-style="text-overflow: ellipsis; white-space: pre;"
          @clicked="onClickItem"
          data-item="{{school}}"
        >{{school.code}} {{school.name}}
          <text wx:if="{{school.get_level}}"> - {{school.get_level}}</text>
        </mt-item>
      </div>
<!--      <div v-if="schools.length < 1 && state === 'error'">-->
<!--        <div class="no-school">搜索结果：无</div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
  let schoolsRequest = $global.Api.makeGetRequest({
    action: '/school:type'
  }, function (res, pageContext) {
      wx.showLoading({
        title: '-玩儿命加载中-',
      })
      if (Array.isArray(res.data) && res.data.length > 0) {
        pageContext.setData({
          'state': 'success',
          ['schools']: res.data,
        }, () => {
          wx.hideLoading()
        })
      } else {
        pageContext.setData({
          'state': 'error',
          ['schools']: [],
        }, () => {
          wx.hideLoading()
        })
      }
  }, function (e, pageContext) {
    console.error(e)
    pageContext.setData({
      'state': 'error',
    })
  })

  export default {
    data() {
      return {
        listQuery: {
          name: '',
        },
        form: '',
        schools: [],
        state: '',
      }
    },
    onLoad() {
      // this.fetchData()
      schoolsRequest.bind(this)
      this.setData({
        from: this.$getRouteFrom(),
      })
    },
    methods: {
      fetchData() {
        let title = this.data.listQuery.name.trim()
        if (title.length > 0) {
          let searchOpt = {
            name: this.data.listQuery.name,
          }
          if (this.$mp.query.intention) {
            schoolsRequest.makeUrl({
              type: '/intention'
            }).send(searchOpt)
          } else {
            schoolsRequest.makeUrl({
              type: ''
            }).send(searchOpt)
          }
        }
      },
      onSearchChange(e) {
        if (e.detail) {
          this.setData({
            'state': '',
            ['listQuery.name']: e.detail,
          }, () => {
            this.fetchData()
          })
        } else {
          this.setData({
            'state': '',
            ['listQuery.name']: '',
            ['schools']: [],
          }, () => {
          })
        }
      },
      onSearchCancel(e) {
        console.log('onSearchCancel')
        this.$back()
      },
    },
    handles: {
      onClickItem(e, dataset) {
        // console.d('onClickItem', e.detail, dataset)
        // console.log('select-school-index-to-page-' + this.data.from)
        let d = JSON.parse(JSON.stringify(dataset))
        d.trigger = this.$mp.query.trigger ? this.$mp.query.trigger : ''
        wx.nextTick(() => {
          this.$emit('select-school-index-to-page-' + this.data.from, d)
        })
      },
    },
  }
</script>

<style lang="less">
  @import "../../app.component.less";

  .tip {
    color: #999999;
    font-size: 24pt;
    line-height: 33pt;
    margin-bottom: 20pt;
  }

  .no-result-tip {
    color: #222222;
    font-size: 28pt;
    line-height: 40pt;
  }

  .no-school {
    color: #222222;
    font-size: 28pt;
    line-height: 40pt;
  }

  .input-placeholder {
    color: #B6BABD;
    font-size: 26pt;
  }

  .mt-form-input {
    color: #000000;
    font-size: 26pt;
  }

  .search-item {
    .mt-item {
      display: block;
      height: 80pt;
      border-radius: 12pt;
      border: 2pt solid #efefef;
      padding-left: 65pt;
      padding-right: 65pt;
      #default.font-style(500);
      line-height: 80pt;
      background-color: transparent;
      text-align: left;

      &:active {
        border-color: transparent;
        background-color: #007bff;
        color: #ffffff;
      }

      &:after {
        border: none;
      }
    }
  }
</style>
